import React, {useEffect} from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'
import Snackbar from '@material-ui/core/Snackbar'
import CheckCircleIcon from '@material-ui/icons/CheckCircle'
import ErrorIcon from '@material-ui/icons/Error'
import InfoIcon from '@material-ui/icons/Info'
import CloseIcon from '@material-ui/icons/Close'
import {amber, green} from '@material-ui/core/colors'
import IconButton from '@material-ui/core/IconButton'
import SnackbarContent from '@material-ui/core/SnackbarContent'
import WarningIcon from '@material-ui/icons/Warning'
import {makeStyles} from '@material-ui/core/styles'
import {useGlobalMutation} from '../utils/container'

const variantIcon = {
    success: CheckCircleIcon,
    warning: WarningIcon,
    error: ErrorIcon,
    info: InfoIcon
}

const useStyles1 = makeStyles((theme) => ({
    success: {
        backgroundColor: green[600]
    },
    error: {
        backgroundColor: theme.palette.error.dark
    },
    info: {
        backgroundColor: theme.palette.primary.main
    },
    warning: {
        backgroundColor: amber[700]
    },
    icon: {
        fontSize: 20
    },
    iconVariant: {
        opacity: 0.9,
        marginRight: theme.spacing(1)
    },
    message: {
        display: 'flex',
        alignItems: 'center'
    },
    customSnackbar: {
        minWidth: '180px !important',
        minHeight: '40px !important',
        background: 'rgba(0,0,0,0.7)',
        boxShadow: '0px 2px 4px 0px rgba(42,62,84,0.24)',
        borderRadius: '30px',
        justifyContent: 'center',
        padding: '0 11px'
    }
}))

SnackbarWrapper.propTypes = {
    message: PropTypes.string,
    onClose: PropTypes.func,
    variant: PropTypes.oneOf(['error', 'info', 'success', 'warning']).isRequired
}

function SnackbarWrapper(props) {
    const classes = useStyles1()
    const mutationCtx = useGlobalMutation()
    const {message, onClose, variant, ...other} = props
    const Icon = variantIcon[variant]

    useEffect(() => {
        const timer = setTimeout(() => {
            mutationCtx.removeTop()
        }, 1000)
        return () => {
            clearTimeout(timer)
        }
    }, [mutationCtx])
    return (
        <SnackbarContent
            className={clsx(classes[variant], classes.customSnackbar)}
            aria-describedby="client-snackbar"
            message={
                <span id="client-snackbar" className={classes.message}>
          {variant === 'error' ? (
              <i className="error-icon"/>
          ) : (
              <Icon className={clsx(classes.icon, classes.iconVariant)}/>
          )}
                    {message}
        </span>
            }
            action={[
                <IconButton
                    key="close"
                    aria-label="close"
                    color="inherit"
                    onClick={() => {
                        mutationCtx.removeTop()
                    }}
                >
                    <CloseIcon className={clsx(classes.icon)}/>
                </IconButton>
            ]}
            {...other}
        />
    )
}

export default function CustomizedSnackbar(props) {
    const handleClose = (evt) => {
    }
    return (
        <>
            {props.toasts.map((item, index) => (
                <Snackbar
                    key={index}
                    open={true}
                    anchorOrigin={{
                        vertical: 'top',
                        horizontal: 'center'
                    }}
                    // onClose={handleClose}
                >
                    <SnackbarWrapper
                        onClose={handleClose}
                        variant={item.variant}
                        message={`${item.message}`}
                    />
                </Snackbar>
            ))}
        </>
    )
}
